<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="../packages/reactivity/dist/reactivity.global.js"></script>
    <input id='app' />

    <script>
        const {
            reactive,
            readonly,
            toRaw,
            markRaw,
            effect,
            ref,
            customRef,
            shallowRef,
            isReactive
        } = VueReactivity;

        // function useDebouncedRef(value, delay = 200) {
        //     let timeout
        //     debugger
        //     return customRef((track, trigger) => {
        //         return {
        //             get() {
        //                 track()
        //                 return value
        //             },
        //             set(newValue) {
        //                 clearTimeout(timeout)
        //                 timeout = setTimeout(() => {
        //                     value = newValue
        //                     trigger()
        //                 }, delay)
        //             }
        //         }
        //     })
        // }
        // app.value = useDebouncedRef('hello').value
        const foo = shallowRef({})
        // 改变 ref 的值是响应式的
        foo.value = {}
        // 但是这个值不会被转换。
        isReactive(foo.value) // false
    </script>
</body>

</html>